<template>
  <div class="mainos">
    <div class="main_spac1 paddingBottom5">
      <div class="main_white padding10 paddingBottom20">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back()">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>订单列表</span>
          </div>
        </div>
        <div v-loading="loading">
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>订单详情</div>
          </div>
          <Detail :columns="columns" :orderInfo="orderInfo"></Detail>
          <div class="main_tile boxdq marginTop10">
            <div class="main_tile_l marginLeft0"><em></em>商品详情</div>
          </div>
          <div class="main_table marginTop0">
            <el-table
              ref="multipleTable"
              :data="orderInfo.list || []"
              element-loading-text="加载中"
              fit
              highlight-current-row
              :summary-method="getSummaries"
              show-summary
            >
              <el-table-column label="序号" type="index" class-name="main_hei" align="center" width="60"></el-table-column>
              <el-table-column label="订单单号" prop="order_sn" class-name="main_hei" align="center">
                <template slot-scope="scope">
                  <span class="order_sn" @click="goToDetail(scope.row.id)">{{ scope.row.order_sn }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配送日期" prop="send_time" class-name="main_hei" align="center"></el-table-column>
              <el-table-column label="订单状态" prop="order_status" class-name="main_hei" align="center"></el-table-column>
              <el-table-column label="商品描述" prop="order_desc" class-name="main_hei" align="center"></el-table-column>
              <el-table-column label="订单金额" prop="order_money" class-name="main_hei" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</template>
<script>
import Detail from './components/Detail.vue'
import { menuOrderDetail } from '../mockData'
import { getInfo } from '@/api/menu.js'
const { columns } = menuOrderDetail
export default {
  components: { Detail },
  data() {
    return {
      loading: false,
      columns,
      tableData: [],
      orderInfo: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        switch (index) {
          case 0:
            sums[index] = "合计";
            break;
          case 5:
            sums[index] = this.orderInfo.order_amount;
        }
      });

      return sums;
    },
    getData() {
      getInfo('/packageOrder/detail', {
        id: this.$route.query.orderId
      }).then(res => {
        if(res.data) {
          this.orderInfo = res.data
        }
      })
    },
    goToDetail(id) {
      this.$router.push(`/order/list/see?id=${id}`)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.order_sn {
  color: #03A98E;
  text-decoration: underline;
  cursor: pointer;
}
</style>